/*
 * @Description: 生成 vue index
 * @Author: DHL
 * @Date: 2022-01-30 14:20:12
 * @LastEditors: DHL
 * @LastEditTime: 2023-01-08 21:21:18
 */

import { firstToUpperCase, firstToLowerCase, getAuthKey } from '../../utils/codeGenUtils'

export function createIndex(codeGenConfig: any) {
  const classNameFirstToUpperCase = firstToUpperCase(codeGenConfig.className)
  const classNameFirstToLowerCase = firstToLowerCase(codeGenConfig.className)
  const resName = classNameFirstToLowerCase
    .replace(/([A-Z])/g, '_$1')
    .trim()
    .replaceAll('_', '-')
    .toUpperCase()

  return `
<!--
 * @Description: ${codeGenConfig.genName} - 主页面
 * @Author: ${codeGenConfig.genAuthor}
 * @Date: ${codeGenConfig.createData}
 * @LastEditors: ${codeGenConfig.genAuthor}
 * @LastEditTime: ${codeGenConfig.createData}
-->
<template>
  <tw-layout 
    @refresh="handleRefresh"
    @search="handleSearch"
    @reset="handleReset">
    <!-- 按钮组 -->
    <template #btns>
      <el-button
        class="item"
        type="danger"
        :loading="loadingByDel"
        :disabled="isSelectRows"
        v-auth="\`${getAuthKey(resName, 'delLogicBatch')}\`"
        @click="handleDelete()"
      >
        <svg-icon iconClass="delete"></svg-icon>
        批量删除
      </el-button>

      <el-button class="item" type="primary" v-auth="\`${getAuthKey(
        resName,
        'add'
      )}\`" @click="handleOpenForm('add')">
        <svg-icon iconClass="plus"></svg-icon>
        新增
      </el-button>
    </template>

    <!-- 查询表单 -->
    <template #header>
      <el-form ref="searchFormRef" :model="searchForm" label-width="90px">
        <el-row>
          ${getSearchForm(codeGenConfig.optionsJson.columns)}
        </el-row>
      </el-form>
    </template>

    <!-- 数据表格 -->
    <tw-table 
      ref="tableRef"
      :loading="loading"
      :options="tableOptions"
      :events="tableEvents"
      :data="tableData"
      @search="searchList"
      exportExcelAuthKey="${getAuthKey(resName, 'exportExcel')}"
      @exportExcel="handleExport"
    >
      <template #action="{ row }">
        <el-button link  type="warning" v-auth="\`${getAuthKey(
          resName,
          'edit'
        )}\`" @click="handleOpenForm('edit', row)">
          编辑
        </el-button>
        <el-button link  type="danger" v-auth="\`${getAuthKey(
          resName,
          'delLogicBatch'
        )}\`" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </tw-table>

    <${classNameFirstToLowerCase}Form ref="formRef" @refreshTableData="handleRefresh"></${classNameFirstToLowerCase}Form>
  </tw-layout>
</template>

<script src="./useIndex.ts"></script>

<style scoped lang="scss"></style> 
`
}

/**
 * 获取查询表单
 * @param columns
 */
function getSearchForm(columns: any) {
  let rtn: Array<string> = []

  columns.forEach((item: any) => {
    if (item.query) {
      rtn.push(
        `
          <el-col :span="6">
            <el-form-item label="${item.javaComment}">
              ${getSearchComponent(item)}
            </el-form-item>
          </el-col>
          `
      )
    }
  })
  return rtn.join('')
}

/**
 * 查询表单组件
 * @param item
 * @returns
 */
function getSearchComponent(item: any) {
  let rtn: Array<string> = []
  switch (item.componentType) {
    case 'input':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-input v-model="searchForm.${item.javaField}Begin" clearable placeholder="请输入${item.javaComment}-开始"></el-input>
                <div class="split-line">-</div>
                <el-input v-model="searchForm.${item.javaField}End" clearable placeholder="请输入${item.javaComment}-结束"></el-input>
              </div>`
        )
      } else {
        rtn.push(
          `<el-input v-model="searchForm.${item.javaField}" clearable placeholder="请输入${item.javaComment}"></el-input>`
        )
      }
      break
    case 'textarea':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-input v-model="searchForm.${item.javaField}Begin" type="textarea" :rows="2" clearable placeholder="请输入${item.javaComment}-开始"></el-input>
                <div class="split-line">-</div>
                <el-input v-model="searchForm.${item.javaField}End" type="textarea" :rows="2" clearable placeholder="请输入${item.javaComment}-结束"></el-input>
              </div>`
        )
      } else {
        rtn.push(
          `<el-input v-model="searchForm.${item.javaField}" type="textarea" :rows="2" clearable placeholder="请输入${item.javaComment}"></el-input>`
        )
      }
      break
    case 'select':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-select v-model="searchForm.${item.javaField}Begin" clearable placeholder="请选择${item.javaComment}-开始">
                  <el-option
                    v-for="item in ${item.javaField}BeginData"
                    :key="\`${item.javaField}Begin_\${item.value}\`"
                    :label="item.label"
                    :value="item.value"
                  >
                </el-select>
                <div class="split-line">-</div>
                <el-select v-model="searchForm.${item.javaField}End" clearable placeholder="请选择${item.javaComment}-结束">
                  <el-option
                    v-for="item in ${item.javaField}EndData"
                    :key="\`${item.javaField}End_\${item.value}\`"
                    :label="item.label"
                    :value="item.value"
                  >
                </el-select>
              </div>`
        )
      } else {
        rtn.push(
          `<el-select v-model="searchForm.${item.javaField}" clearable placeholder="请选择${item.javaComment}">
            <el-option
              v-for="item in ${item.javaField}Data"
              :key="\`${item.javaField}_\${item.value}\`"
              :label="item.label"
              :value="item.value"
            >
          </el-select>`
        )
      }
      break
    case 'inputNumber':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-input-number v-model="searchForm.${item.javaField}Begin" clearable placeholder="请输入${item.javaComment}-开始"/>
                <div class="split-line">-</div>
                <el-input-number v-model="searchForm.${item.javaField}End" clearable placeholder="请输入${item.javaComment}-结束"/>
              </div>`
        )
      } else {
        rtn.push(
          `<el-input-number v-model="searchForm.${item.javaField}" clearable placeholder="请输入${item.javaComment}"/>`
        )
      }
      break
    case 'radio':
      rtn.push(
        `<el-radio v-model="searchForm.${item.javaField}" label="${item.javaComment}">${item.javaComment}</el-radio>`
      )
      break
    case 'checkbox':
      rtn.push(
        `<el-checkbox v-model="searchForm.${item.javaField}" label="${item.javaComment}"></el-checkbox>`
      )
      break
    case 'datePicker':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-date-picker v-model="searchForm.${item.javaField}Begin" type="date" clearable value-format="YYYY-MM-DD" placeholder="请输入${item.javaComment}-开始"></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker v-model="searchForm.${item.javaField}End" type="date" clearable value-format="YYYY-MM-DD" placeholder="请输入${item.javaComment}-结束"></el-date-picker>
              </div>`
        )
      } else {
        rtn.push(
          `<el-date-picker v-model="searchForm.${item.javaField}" type="date" clearable value-format="YYYY-MM-DD" placeholder="请选择${item.javaComment}"></el-date-picker>`
        )
      }
      break
    case 'dateTimePicker':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-date-picker v-model="searchForm.${item.javaField}Begin" type="datetime" clearable value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入${item.javaComment}-开始"></el-date-picker>
                <div class="split-line">-</div>
                <el-date-picker v-model="searchForm.${item.javaField}End" type="datetime" clearable value-format="YYYY-MM-DD HH:mm:ss" placeholder="请输入${item.javaComment}-结束"></el-date-picker>
              </div>`
        )
      } else {
        rtn.push(
          `<el-date-picker v-model="searchForm.${item.javaField}" type="datetime" clearable value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择${item.javaComment}"></el-date-picker>`
        )
      }
      break
    case 'timePicker':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-time-picker v-model="searchForm.${item.javaField}Begin" clearable placeholder="请输入${item.javaComment}-开始"></el-time-picker>
                <div class="split-line">-</div>
                <el-time-picker v-model="searchForm.${item.javaField}End" clearable placeholder="请输入${item.javaComment}-结束"></el-time-picker>
              </div>`
        )
      } else {
        rtn.push(
          `<el-time-picker v-model="searchForm.${item.javaField}" clearable placeholder="请选择${item.javaComment}"></el-time-picker>`
        )
      }
      break
    case 'timeSelect':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                <el-time-select v-model="searchForm.${item.javaField}Begin" start="08:30" step="00:15" end="18:30" clearable placeholder="请输入${item.javaComment}-开始"></el-time-select>
                <div class="split-line">-</div>
                <el-time-select v-model="searchForm.${item.javaField}End" start="08:30" step="00:15" end="18:30" clearable placeholder="请输入${item.javaComment}-结束"></el-time-select>
              </div>`
        )
      } else {
        rtn.push(
          `<el-time-select v-model="searchForm.${item.javaField}" start="08:30" step="00:15" end="18:30" clearable placeholder="请选择${item.javaComment}"></el-time-select>`
        )
      }
      break
    case 'switch':
      rtn.push(
        `<el-switch v-model="searchForm.${item.javaField}" inline-prompt active-text="是" inactive-text="否" />`
      )
      break
    case 'upload':
      rtn.push(``)
      break
    case 'dataDic':
      rtn.push(
        `<el-select v-model="searchForm.${item.javaField}" clearable placeholder="请选择${item.javaComment}">
                <tw-dic dicKey="${item.dataDic}"></tw-dic>
              </el-select>`
      )
      break
    case 'money':
      if (item.queryWay === 'between') {
        rtn.push(
          `<div class="flex-space-between">
                  <tw-money v-model="searchForm.${item.javaField}Begin" clearable placeholder="请输入${item.javaComment}-开始"></tw-money>
                  <div class="split-line">-</div>
                  <tw-money v-model="searchForm.${item.javaField}End" clearable placeholder="请输入${item.javaComment}-结束"></tw-money>
                </div>`
        )
      } else {
        rtn.push(
          `<tw-money v-model="searchForm.${item.javaField}" clearable placeholder="请输入${item.javaComment}"></tw-money>`
        )
      }
      break
    default:
      break
  }
  return rtn.join('')
}
